<template>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :default-openeds="['1','2']"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>系统设置</span>
            </template>
          
            <el-menu-item index="1-1">
                <RouterLink to="/about">模块管理</RouterLink>
            </el-menu-item>
               
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
                <el-icon><icon-menu /></el-icon>
                <span>用户中心</span>
            </template>
            <el-menu-item index="2-1">
                <RouterLink to="/about">用户管理</RouterLink>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="3">
            <el-icon><document /></el-icon>
            <span>Navigator Three</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>Navigator Four</span>
          </el-menu-item>
        </el-menu>
     
  </template>
  
  <script lang="ts" setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'

  import { RouterLink } from 'vue-router';

  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  